<template>
  <div>
    <a-modal v-model="modalVisible" @ok="closeModal" @cancel="closeModal" width="90%" title="生成WSDL框架代码">
      <a-card :bordered="false">
        <a-table :columns="columns" :data-source="transInfo" :pagination="false">
          <template slot="operation" slot-scope="record">
            <div class="operation-button">
              <a-button type="primary" @click="WSDL2Java(record)">WSDL2Java</a-button>
              <a-button type="primary" @click="downloadWSDL(record)">下载框架代码</a-button>
            </div>
          </template>
        </a-table>
      </a-card>
    </a-modal>
    <a-modal v-model="wsdlPathModal" @ok="handelWSDL" width="40%" title="WSDL地址">
      <a-card :bordered="false" style="width: 100%">
        <a-form-model ref="wsdlPathForm" :rules="wsdlPathRules" :model="wsdlPath">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-model-item label="WSDL路径" prop="path" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
                <a-input
                  v-model="wsdlPath.path"
                  placeholder="示例路径:http://10.112.20.145:8080/Publish/WSDLfilePath/S*********.wsdl "
                />
              </a-form-model-item> </a-col
          ></a-row>
        </a-form-model>
      </a-card>
    </a-modal>
  </div>
</template>

<script>
import { generateWSDLCode, downloadWSDL } from '@api/pf_bank/wsdl/wsdl'
export default {
  name: 'wsdlModal',
  props: {
    trans: {
      type: Array
    },
    showModal: {
      type: Boolean
    }
  },
  data() {
    return {
      selectTrans: '',
      wsdlPathRules: {
        path: [{ required: true, message: '请输入wsdl路径', trigger: 'blur' }]
      },
      wsdlPath: { path: '' },
      wsdlPathModal: false,
      modalVisible: this.showModal,
      transInfo: this.trans,
      columns: [
        { title: '交易名称', dataIndex: 'transName', key: 'transName' },
        { title: '交易码', dataIndex: 'transCode', key: 'transCode' },
        { title: '交易状态', dataIndex: 'transStatus', key: 'transStatus' },
        { title: 'ESB服务名称', dataIndex: 'esbName', key: 'esbName' },
        { title: 'ESB服务操作id', dataIndex: 'esbId', key: 'esbId' },
        { title: 'ESB服务操作名称', dataIndex: 'esbAction', key: 'esbAction' },
        { title: '操作', scopedSlots: { customRender: 'operation' } }
      ]
    }
  },
  watch: {
    showModal(newVal) {
      this.modalVisible = newVal
    },
    trans(newVal) {
      this.transInfo = newVal
    }
  },
  methods: {
    closeModal() {
      this.$emit('close', false)
    },

    //点击按钮，弹出输入路径的modal
    WSDL2Java(record) {
      this.selectTrans = record
      this.wsdlPathModal = true
    },

    handelWSDL() {
      this.$refs.wsdlPathForm.validate(valid => {
        if (valid) {
          let hide = this.$message.loading('正在生成框架代码...')
          generateWSDLCode(this.selectTrans, this.wsdlPath.path).then(res => {
            if (res.code == 200) {
              hide()
              this.$message.success('WSDL框架代码生成成功！')
              this.$refs.wsdlPathForm.resetFields()
              this.$emit('close', false)
            } else {
              hide()
              this.$message.error(res.message)
              this.$refs.wsdlPathForm.resetFields()
            }
          })
        } else {
          return false
        }
      })
    },

    //下载WSDL框架代码的方法
    downloadWSDL(record) {
      let transCode = record.transCode
      downloadWSDL(transCode).then(res => {
        let blob = new Blob([res], {
          type: 'application/zip' //将会被放入到blob中的数组内容的MIME类型
        })
        let objectUrl = URL.createObjectURL(blob) //生成一个url
        let a = document.createElement('a')
        a.href = objectUrl
        a.download = transCode + '.zip'
        a.click()
        window.URL.revokeObjectURL(objectUrl)
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
.operation-button {
  margin-top: 20px;
}
.operation-button > button {
  margin-right: 15px;
}
</style>
